<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title> arcgis 3d绘制测试</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #buttonsDiv {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 12px;
            background-color: rgba(200, 200, 200, 0.5);
            border: 1px solid black;
        }

        /*#pt,#line,#polygon {*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        /*width: 30px;*/
        /*height: 30px;*/
        /*background-color: rgba(100, 100, 100, 0.8);*/
        /*border: 2px solid #ccc;*/
        /*}*/
    </style>
    <link rel="stylesheet" href="./script/bootstrap/css/bootstrap.css">
    <script src="./script/jquery-2.2.3.min.js"></script>


    <script src="script/jscolor.min.js"></script>
    <!--<link rel="stylesheet" href="http://localhost/jsapi/4.1/esri/css/main.css">-->
    <!--<script src="http://localhost/jsapi/4.2/"></script>-->
    <!-----------浮动有修改的位置结束--------->
    <link href="http://map.510link.com/arcgis_js_api/library/4.5/esri/css/main.css" rel="stylesheet"/>
    <script>
        var HOSTNAME_AND_PATH_TO_JSAPI = "map.510link.com/arcgis_js_api/library/4.5/";
    </script>

    <script src="http://map.510link.com/arcgis_js_api/library/4.5/init.js"></script>

    <script src="./script/AnimateEng.js"></script>
    <script src="./script/SpriteClass.js"></script>

    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">-->
    <script>

        var tmsMap = new Object();

        require([
            'esri/layers/FeatureLayer',
            'esri/layers/support/LabelClass',
            'esri/symbols/LabelSymbol3D',
            'esri/symbols/TextSymbol3DLayer',
            "esri/Map",
            "esri/views/SceneView",
            "esri/widgets/Search",
            "./script/Graphic.js",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/layers/GraphicsLayer",
            "esri/symbols/PictureMarkerSymbol",
            'esri/config',
            "dojo/dom",
            "dojo/on",
            './script/draw2.js',
            "esri/Ground",
            "esri/layers/ElevationLayer",
            "dojo/domReady!"
        ], function (FeatureLayer, LabelClass, LabelSymbol3D, TextSymbol3DLayer, Map, SceneView, Search, Graphic, Point, Polyline, Polygon, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GraphicsLayer,
                     PictureMarkerSymbol, esriConfig, dom, on, DrawExt, Ground, ElevationLayer) {
            esriConfig.request.corsEnabledServers.push('localhost');
            //http://localhost:63342/
            esriConfig.request.corsEnabledServers.push('elevation3d.arcgis.com');
            esriConfig.request.corsEnabledServers.push('services.arcgisonline.com');
            esriConfig.request.corsEnabledServers.push('server.arcgisonline.com');

            //services.arcgisonline.com
            //server.arcgisonline.com

            var worldElevation = new ElevationLayer({
                //https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer
                url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
            });

            var graphicsLayer = new GraphicsLayer({
                id: '_commandFire1'
            });

            var graphicsLayer2 = new GraphicsLayer({
                id: '_commandFireText'
            });

            tmsMap.PictureMarkerSymbol = PictureMarkerSymbol;
            tmsMap.Graphic = Graphic;
            tmsMap.Point = Point;

            tmsMap.animateLayer = new GraphicsLayer({
                id: '_commandFireAnimate'
            });

            map = new Map({
                basemap: "hybrid",

                ground: new Ground({
                    layers: [worldElevation]
                })

            });
            map.layers.add(graphicsLayer);//基本层
            map.layers.add(graphicsLayer2);//文本层
            map.layers.add(tmsMap.animateLayer);//动画层

            view = new SceneView({
                map: map,
                container: "viewDiv",
                center: [106.584914, 29.509475],
                zoom: 12

            });

            draw = new DrawExt({
                view: view, gl: graphicsLayer, glText: graphicsLayer2,
                worldElevation: worldElevation, curMarkers: {
                    "date": "2018-1-1 ",  //每日最多一条历史记录
                    "userName": "张三",
                    "graphics": []
                }
            });

            document.getElementById('buttonsDiv').addEventListener('click', function (e) {
                switch (e.target.id) {
                    case 'pt':
                        draw.activate(DrawExt.POINT)
                        break;
                    case 'pticon':
                        var picUrl = e.target.getAttribute("data-icon");
                        draw.setIcon(picUrl);
                        draw.activate(DrawExt.PTICON);
                        break;
                    case 'freeline':
                        draw.activate(DrawExt.FREELINE)
                        break;
                    case 'line':
                        draw.activate(DrawExt.LINE)
                        break;
                    case 'dashline':
                        draw.activate(DrawExt.DASHLINE)
                        break;
                    case 'polygon':
                        draw.activate(DrawExt.POLYGON)
                        break;
                    case 'circle':
                        draw.activate(DrawExt.CIRCLE)
                        break;
                    case 'curve':
                        draw.activate(DrawExt.CURVE)
                        break;
                    case 'freearrow':
                        draw.activate(DrawExt.FREEHAND_ARROW)
                        break;
                    case 'freepoly':
                        draw.activate(DrawExt.BEZIER_POLYGON)
                        break;
                    case 'Bezierline':
                        draw.activate(DrawExt.BEZIER_CURVE)
                        break;
                    case 'multihead':
                        draw.activate(DrawExt.MULTIHEAD)
                        break;
                    case 'cube':
                        draw.activate(DrawExt.CUBE)
                        break;
                    case 'trackarrow':
                        draw.activate(DrawExt.ATTACK_ARROW)
                        break;
                    case 'cleardraw':
                        draw.clearAllGraphic();
                        break;
                    case 'fireline':
                        draw.activate(DrawExt.FIRELINE)
                        break;
                    case 'fireArea':
                        draw.activate(DrawExt.FIREAREA)
                        break;
                    case 'demilitarizedZone':
                        draw.activate(DrawExt.DMZ)
                        break;
                    case 'fireSprawl':
                        draw.showSprawlDlg();
                        break;
                    case 'reDraw':
                        draw.ReDrawAllGraphics();
                        break;
                    case 'deleteFireLine':
                        draw.deleteFireLine();
                        break;
                }
            })

            $("#btnSaveCommandFireName").click(function () {

                draw.drawTextSym();

            });

            view.on("click", function (evt) {

                var screenPoint = {
                    x: evt.x,
                    y: evt.y
                };

                view.hitTest(screenPoint)
                    .then(function (response) {
                        // do something with the result graphic
                        var graphicNode = response.results[0].graphic;
                        if (graphicNode) {

                            console.log("click!" + graphicNode);

                        }

                    });
            }); //end view click

//            document.body.addEventListener('keydown', function (e) {
//                switch (e.code) {
//                    case 'Numpad1':
//                        draw.newHead()
//                        break;
//                    case 'Numpad2':
//                        draw.activate(Draw.POINT)
//                        break;
//                    case 'Numpad3':
//                        draw.activate(Draw.LINE)
//                        break;
//                    case 'Numpad4':
//                        draw.activate(Draw.POLYGON)
//                        break;
//                    case 'Numpad5':
//                        draw.activate(Draw.CIRCLE)
//                        break;
//                    case 'Numpad6':
//                        draw.activate(Draw.CURVE)
//                        break;
//                    case 'Numpad7':
//                        draw.activate(Draw.FREEHAND_ARROW)
//                        break;
//                    case 'Numpad8':
//                        draw.activate(Draw.BEZIER_POLYGON)
//                        break;
//                    case 'Numpad9':
//                        draw.activate(Draw.BEZIER_CURVE)
//                        break;
//                    case 'Numpad0':
//                        draw.activate(Draw.MULTIHEAD)
//                        break;
//                }
//
//            })
            update = function (e) {
                draw.pointSymbol = new SimpleMarkerSymbol({
                    color: [e.rgb[0], e.rgb[1], e.rgb[2]],

                    outline: {
                        color: [255, 255, 255],
                        width: 2
                    }
                })
                draw.lineSymbol = new SimpleLineSymbol({
                    color: [e.rgb[0], e.rgb[1], e.rgb[2]],
                    width: 4
                })
                draw.fillSymbol = new SimpleFillSymbol({
                    color: [e.rgb[0], e.rgb[1], e.rgb[2]],
                    outline: {
                        color: [255, 255, 255],
                        width: 1
                    }
                })
            }
//            var offsetInput = document.getElementById('offsetInput')
//            var select = document.getElementById('modeSelect')
//            select.addEventListener('change', function () {
//                var mode = select.options[select.selectedIndex].value;
//
//                if (mode != "on-the-ground") {
//                    offsetInput.removeAttribute("disabled");
//                } else {
//                    offsetInput.setAttribute("disabled", "true");
//                }
//
//                graphicsLayer.elevationInfo = {
//                    mode: mode,
//                    offset: document.getElementById('offsetInput').value
//                };
//            })
//
//            offsetInput.addEventListener('mousewheel', function (e) {
//                offsetInput.value -= e.deltaY
//                graphicsLayer.elevationInfo = {
//                    mode: select.options[select.selectedIndex].value,
//                    offset: document.getElementById('offsetInput').value
//                };
//            })

        });
    </script>
    <script src="./script/bootstrap/js/bootstrap.js"></script>
</head>

<body>
<div id="viewDiv"></div>
<div id="buttonsDiv">
    <button id="pt">点</button>
    <button id="pticon" data-icon="img/蓝色标记.png">网关点</button>
    <button id="freeline">随手画</button>
    <button id="line">线</button>
    <button id="polygon">多边形</button>
    <button id="circle">圆</button>
    <button id="curve">圆弧</button>
    <button id="freearrow">箭头</button>
    <button id="trackarrow">攻击箭头</button>
    <button id="freepoly">圆滑多边形</button>
    <button id="Bezierline">光滑曲线</button>
    <button id="multihead">多头箭头</button>
    <button id="fireline">火线</button>
    <button id="fireArea">火场</button>

    <button id="demilitarizedZone">隔离带</button>
    <button id="fireSprawl">火势蔓延</button>

    <button id="cleardraw">清除绘制</button>

    <button id="deleteFireLine">删除火线测试</button>

    <button id="reDraw">重绘</button>
    <!--<button id="cube">Cubic a polygon</button>
    <button id="dashline">点画线(体验功能)</button>-->
    <br>
    <label>
        <input class="jscolor" value="e27728" style="margin-top: 10px" onchange="update(this.jscolor)">
    </label>
    <!--<table style="display:inline;margin-left:50px">-->
    <!--<tr>-->
    <!--<td>Mode:</td>-->
    <!--<td>-->
    <!--<select id="modeSelect">-->
    <!--<option value="on-the-ground">on the ground</option>-->
    <!--<option value="relative-to-ground">relative to ground</option>-->
    <!--<option value="absolute-height">absolute height</option>-->
    <!--</select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td>Offset:</td>-->
    <!--<td><input id="offsetInput" type="text" size="5" value="2000" disabled="true"></td>-->
    <!--</tr>-->
    <!--</table>-->
</div>


<!-- Modal 输入防火指挥名称 -->
<div class="modal fade" id="fireCommandDlg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">请输入指定对象的名称</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="fireCommnad-name" class="control-label">对象名称:</label>
                        <input type="text" class="form-control" id="fireCommnad-name">
                    </div>

                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="btnSaveCommandFireName">确定</button>
            </div>
        </div>
    </div>
</div>
<!--/end 输入防火指挥名称 -->


<!-- Modal 输入防火指挥火势参数对话框 -->
<div class="modal fade" id="fireSprawlParmDlg" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">请输入指定防火指挥火势参数</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="paraWeather" class="control-label">天气:</label>
                        <select class="form-control" id="paraWeather">
                            <option value="3">晴</option>
                            <option value="1">阴</option>
                            <option value="2">多云</option>
                            <option value="0.3">小雨</option>
                            <option value="0.2">中雨</option>
                            <option value="0">大雨</option>
                        </select>

                    </div>
                    <div class="form-group">
                        <label for="paraVegetation" class="control-label">植被:</label>
                        <select class="form-control" id="paraVegetation">
                            <option value="3">茂密</option>
                            <option value="2">一般</option>
                            <option value="0.5">稀疏</option>
                            <option value="0.001">无</option>

                        </select>

                    </div>
                    <div class="form-group">
                        <label for="paraTemperature" class="control-label">温度(度）:</label>
                        <input type="number" id="paraTemperature" class="form-control"/>


                    </div>

                    <div class="form-group">
                        <label for="paraHumidity" class="control-label">湿度(%）:</label>
                        <input type="number" id="paraHumidity" class="form-control"/>


                    </div>
                    <div class="form-group">
                        <label for="paraWindDirect" class="control-label">风向:</label>

                        <select class="form-control" id="paraWindDirect">
                            <option value="1">北</option>
                            <option value="2">南</option>
                            <option value="3">西</option>
                            <option value="4">东</option>
                            <option value="5">东北</option>
                            <option value="6">东南</option>
                            <option value="7">西北</option>
                            <option value="8">西南</option>
                        </select>

                    </div>
                    <div class="form-group">
                        <label for="paraWindPower" class="control-label">风力:</label>
                        <input type="number" id="paraWindPower" class="form-control"/>

                    </div>
                    <div class="form-group">
                        <label for="paraTerrin" class="control-label">地形:</label>
                        <select class="form-control" id="paraTerrin">
                            <option value="1.5">上坡</option>
                            <option value="0.5">下坡</option>
                            <option value="1">平地</option>


                        </select>

                    </div>
                    <div class="form-group">
                        <label for="paraWindPower" class="control-label">模拟时长(小时）:</label>
                        <input type="number" id="paraTime" class="form-control"/>

                    </div>


                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="btnExtendParamOK">确定</button>
            </div>
        </div>
    </div>
</div>
<!--/end 输入防火指挥火势参数名称 -->


</body>
</html>